import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Platform,
  ListView,
} from 'react-native';
import Request from '../../utils/request';
import PxToDp from '../../utils/PxToDp';
import Loading from '../Public/Loading';
import EmptyDataPage from '../Public/EmptyDataPage';
import ChannelItem from './ChannelItem';

class ChannelUser extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      dataSource: ds,
      channelIsLoading: true,
      channelList: [],
    };
  }
  getChannelList() {
    Request.get({
      url: '/customers/channel',
      success: (data) => {
        this.setState({ channelIsLoading: false });
        this.setState({ channelList: data.users });
      },
      fail: () => {
        this.setState({ channelIsLoading: false });
      },
      error: () => {
        this.setState({ channelIsLoading: false });
      },
    });
  }
  componentDidMount() {
    this.getChannelList();
  }

  render() {
    return (
      <View style={[style.wrapper, style.flex]}>
        {
        this.state.channelIsLoading ?
          <Loading /> :
            this.state.channelList && this.state.channelList.length > 0
          ?
            <ListView
              dataSource={this.state.dataSource.cloneWithRows(this.state.channelList)}
              renderRow={rowData => (<ChannelItem
                navigator={this.props.navigator}
                saleData={rowData}
              />)
            }
            />
          :
            <EmptyDataPage />
        }
      </View>
    );
  }
}
const style = StyleSheet.create({
  wrapper: {
    marginTop: Platform.OS === 'ios' ? PxToDp(20) : 0,
    backgroundColor: '#F5F5F5',
    paddingLeft: PxToDp(10),
    paddingRight: PxToDp(10),
  },
  flex: {
    flex: 1,
  },
});
export default ChannelUser;
